<div class="article_form">
<%= bootstrap_form_for(@article, html: {multipart: true}) do |f| %>

    <p>
    <%= f.text_field :title, label: "标题" %>
    </p>
    <div class="edit_tools">
      <ul class="pills clearfix">
        <div class="left_icons pull-left">
            <li class="edit tabnav-tab selected">
                <a href="#">编辑</a>
            </li>
            <li class="preview tabnav-tab">
                <a href="#">预览</a>
            </li>
        </div>
        <div class="right_icons pull-right">
            <li class="the_insert_code pull-right">
            <div class="dropdown pull-right">
                <a href="#" class="fa fa-code dropdown-toggle" data-placement="top" data-toggle="dropdown" title="插入代码"></a>
                <ul class="dropdown-menu pull-right" role="menu">
                    <li><a class="insert_code" data-content="ruby" id="ruby">Ruby</a>
                    </li>
                    <li><a class="insert_code" data-content="erb" id="erb">HTML / ERB</a>
                    </li>
                    <li><a class="insert_code" data-content="scss" id="scss">CSS / SCSS</a>
                    </li>
                    <li><a class="insert_code" data-content="js" id="js">JavaScript</a>
                    </li>
                    <li><a class="insert_code" data-content="yml" id="yml">YAML </a>
                    </li>
                    <li><a class="insert_code" data-content="coffee" id="coffee">CoffeeScript</a>
                    </li>
                    <li><a class="insert_code" data-content="conf" id="conf">Nginx / Redis  </a>
                    </li>
                    <li><a class="insert_code" data-content="python" id="python">Python</a>
                    </li>
                    <li><a class="insert_code" data-content="php" id="php">PHP</a>
                    </li>
                    <li><a class="insert_code" data-content="java" id="java">Java</a>
                    </li>
                    <li><a class="insert_code" data-content="erlang" id="erlang">Erlang</a>
                    </li>
                    <li><a class="insert_code" data-content="shell" id="shell">Shell / Bash</a>
                    </li>
                </ul>
            </div>
            </li>
            <li class="upload_image pull-right">
                <a href="#" class="fa fa-picture-o image_upload" data-placement="top" data-toggle="tooltip" title="上传图片"></a>
                <input type="file" id="article-upload-images" multiple>
            </li>
        </div>
      </ul>
    </div>
    <p>
    <%= f.text_area :body, label: "正文" %>
    </p>
    <p>
    <%= f.text_field :tag_list %>
    </p>
    <p>
    <%= f.submit "发布文章", data: { disable_with: "提交中...." }, class: "btn btn-success" %>
    </p>
<% end %>
</div>


<%= content_for :template_js do %>
<script>
$(".preview").click(function() {
    $(".edit").removeClass("selected");
    $(this).addClass("selected");
    var b = $(".article_form .form-group").eq(1);
    var preview_content = b.find("textarea").val();
    b.find("textarea").hide();
    b.prepend("<div class='preview-box markdown-format' id='preview-box'>加载中...</div>");
    $.ajax({type: "POST", url: "/edit_preview", data: {content: preview_content} });

    return false;
});

$(".edit").click(function() {
    $(".preview").removeClass("selected");
    $(this).addClass("selected");
    var b = $(".article_form .form-group");
    $(".preview-box").remove();
    b.find('textarea').show();
    return false;
});


Topics = {
    appendImageFromUpload: function(srcs){
        var  txtBox = $("#article_body"),
             caret_pos = txtBox.caret('pos'),
             src_merged = "";
        console.log(srcs);
        srcs.map( function(src) {
          src_merged = "![]("+src+")\n";
        });
        var source = txtBox.val();
        var before_text = source.slice(0, caret_pos);
        txtBox.val(before_text + src_merged + source.slice(caret_pos+1, source.count));
        txtBox.caret('pos',caret_pos + src_merged.length);
        txtBox.focus();
    },


    restoreUploaderStatus: function(){
        $(".upload_image").parent().find("span.loading").remove();
        $(".upload_image").show();
    },


    initUploader: function(){
        $(".image_upload").click( function() {
            $("#article_body").focus();
            $("#article-upload-images").click();
            return false;
        });

        var opts = {
            url : "/photos",
            type : "POST",
            beforeSend : function(){
                $(".upload_image").hide();
                $(".upload_image").before("<span class='loading'>上传中...</span>");
            },
            success : function(result, status, xhr){
                Topics.restoreUploaderStatus();
                Topics.appendImageFromUpload([result]);
            },
            error : function(result, status, errorThrown){
                Topics.restoreUploaderStatus();
                if (result.status === 0) {
                    alert('无法连接.');
                } else if (result.status == 404) {
                    alert('提交的页面不存在');
                } else if (result.status == 500) {
                    alert('内部服务器错误');
                } else if (status === 'parsererror') {
                    alert('提交的json处理失败');
                } else if (status === 'timeout') {
                    alert('超时错误');
                } else if (status === 'abort') {
                    alert('ajax请求中止');
                } else {
                    alert('Uncaught Error.\n' + result.responseText);
                }            
            }
        };

        $("#article-upload-images").fileUpload(opts);
        return false;
    },

    appendCodesFromHint: function(language){
        if(language === null){
            language = '';
        } 
        var  txtBox = $("#article_body");
             caret_pos = txtBox.caret('pos');
             prefix_break = "";
        if(txtBox.val().length > 0){
            prefix_break = "\n";
        }
        var src_merged = "" + prefix_break + "```" + language + "\n\n```\n";
        source = txtBox.val();
        var before_text = source.slice(0, caret_pos);
        txtBox.val(before_text + src_merged + source.slice(caret_pos + 1, source.count));
        txtBox.caret('pos', caret_pos + src_merged.length - 5);
        txtBox.focus();
    },

    insert_code: function(){
        $("a.insert_code").click(function(){
            Topics.appendCodesFromHint($(this).data('content') || $(this).attr('id'));
            return false;
        });
    },
};


Topics.initUploader();
Topics.insert_code();

$('.image_upload').tooltip();
$('.fa-code').tooltip({
    container: 'body'
});
$('.dropdown-toggle').dropdown();

$("textarea#article_body").keydown(function(e) {
  if (e.ctrlKey && e.keyCode == 13) {
    $("input[type=submit]").click();
  }
});
</script>
<% end %>
